<template>
	<view class="content">
		<view class="imagebox" @click="gobaock">
			<image :src="proxy.serverimageUrl + 'back-black.png'" mode=""></image>
			<view class="title">
				友好协会
			</view>
		</view>
		<scroll-view scroll-y="true" class="textareabox">
			<view class="itembox" v-for="(item,index) in querylist" :key="index">
				<image class="image" :src="item.url" mode=""></image>
				<view class="itembox-right">
					<view class="topbox">
						<view class="topbox-left">
							<p class="p1">{{item.name}}</p>
							<p class="p2">{{item.content}}</p>
						</view>
						<view class="topbox-right">
							<!-- <up-button color="#2854B7" @click="godetail(item)" shape="circle" text="访问"></up-button> -->
						</view>
					</view>
					<view class="kong-line">
						
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		friendshiplist
	} from '../../utils/api.js'
	import {
		defineProps,
		getCurrentInstance,
		ref
	} from 'vue'
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app';
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	onLoad(()=>{
		getlist()
	})
	const querylist = ref([])
	const listdata = ref({
		pageNum:1,
		pageSize:10
	})
	const getlist = () =>{	
		friendshiplist(listdata.value).then(res=>{
			if(res.code == 200){
				querylist.value = res.rows
			}
		})
	}
	const godetail = (item) =>{
		uni.navigateTo({
			url:'/subpages/understand/index?fid=' + item.fid
		})
	}
	const gobaock = () =>{
		uni.switchTab({
			url:'/pages/Home/index'
		})
	}
</script>

<style scoped lang="scss">
	.content{
		width: 750rpx;
		height: 100vh;
		background: #FFFFFF;
		padding: 114rpx 40rpx 0;
		
		.imagebox {
			width: 100%;
			display: flex;
			align-items: center;
			image {
				width: 18rpx;
				height: 34rpx;
			}
			.title{
				font-family: Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 36rpx;
				margin-left: 18rpx;
				color: #202020;
			}
		}
		.textareabox{
			box-sizing: border-box;
			padding-top:60rpx;
			height: calc(100vh - 200rpx);
			.itembox{
				margin-bottom: 24rpx;
				width: 100%;
				display: flex;
				align-items: center;
				.image{
					width: 126rpx;
					height: 126rpx;
					border-radius: 20rpx;
					border: 1rpx solid #DCDCDC;
				}
				.itembox-right{
					width: calc(100% - 126rpx);
					.topbox{
						margin-left: 25rpx;
						// margin-top: 26rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.topbox-left{
							padding-top: 26rpx;
							.p1{
								font-family: Alibaba PuHuiTi;
								font-weight: 500;
								font-size: 34rpx;
								color: #252525;
							}
							.p2{
								margin-top: 18rpx;
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 26rpx;
								color: #BBC0CA;
							}
						}
						.topbox-right{
							width: 140rpx;
							height: 60rpx;
						}
					}
					.kong-line{
						width: 100%;
						height: 1px;
						margin-top: 49rpx;
						background: #DCDCDC;
					}
				}
			}
		}
	}
</style>